<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加收货地址</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }
        .inner_header .aui-pull-right img{
          width:1.8rem;
        }
        .inner_header .aui-pull-right{
          position: relative;
        }
        .inner_header .aui-pull-right span{
          width: 1.2rem;
          height: 1.2rem;
          line-height: 1.2rem;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          top: 0.75rem;
          right: 0.55rem;
          background: #ed6a20;
          font-size: 1rem;
          color: #fff;
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
        }

        .content_list {
            background: #fff;
            width: 100%;
            /*float: left;*/
            box-sizing: border-box;
            padding: 0 0 0 1.3rem;
            margin-bottom: 1reem;
        }

        .content_li {
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
            display: flex;
            text-align: center;
            align-items: center;
        }

        .content_li input {
            line-height: 4.45rem;
            height: 4.45rem;
            flex: 1;
            margin: 0 0 0 2.15rem;
            font-size: 1.5rem;
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #ccc;
            /* placeholder字体大小 */
            font-size: 1.4rem;
            /* placeholder字间距  */
            letter-spacing: 0rem;
        }

        .content_li img:nth-child(1) {
            width: 0.7rem;
            height: 1.3rem;
            margin-right: 1.3rem;
        }

        .address {
            justify-content: space-between;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
            display: flex;
            text-align: center;
            align-items: center;
        }

        .only .aui-checkbox {
            width: 1.8rem!important;
            height: 1.8rem!important;
            border-radius: 100%;
            background: #fff;
            margin: 1.3rem 1.3rem 0 1.3rem;
            /*position: relative;*/
            border: 0.1rem solid #999;
        }

        .only .aui-checkbox:checked {
            background: #fc3131;
            border: solid 1px #fc3131;
        }

        .only .aui-checkbox::after {
            width: 1rem!important;
            height: 0.7rem!important;
            margin-top: -0.5rem!important;
            margin-left: -0.5rem!important;
        }

        .only .aui-checkbox::before {
            width: 1rem!important;
            height: 0.7rem!important;
            margin-top: -0.5rem!important;
            margin-left: -0.5rem!important;
        }

        .only {
            border-bottom: 0!important;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
        }

        .two {
            /*margin-bottom: 1rem;*/
            border-bottom: 1rem solid #f5f5f5;
        }

        .content_li .onbox {
            width: 4.45rem;
            height: 2.75rem;
            background-color: #ccc;
            border-radius: 1.38rem;
            margin-right: 1.3rem;
        }

        .onbox2 {
            width: 4.45rem;
            height: 2.75rem;
            background-color: #f60;
            border-radius: 1.38rem;
            margin-right: 1.3rem;
        }

        .content_li .onbox .zreo {
            border-radius: 50%;
            width: 2.45rem;
            height: 2.45rem;
            background-color: white;
            margin: 0.15rem 0 0.15rem 0rem;
        }

        .last {
            justify-content: space-between;
        }

        .luck {
            margin: 0.15rem 0 0 1.83rem;
            border-radius: 50%;
            width: 2.45rem;
            height: 2.45rem;
            background-color: white;
        }
        /*loading框*/

        .loading {
            width: 35%;
            height: 6.4rem;
            position: fixed;
            ;
            top: 40%;
            left: 35%;
            margin: 0 auto;
            border-radius: 0.7rem;
            line-height: 6.4rem;
            text-align: center;
            color: #fff;
            background: #000;
            opacity: 0.7;
        }

        .content .btn {
            position: fixed;
            width: 93%;
            height: 4rem;
            background-color: #ee6a20;
            line-height: 4rem;
            text-align: center;
            color: #fff;
            margin: 0 auto;
            font-size: 1.5rem;
            letter-spacing: 0.03rem;
            margin-top: 17.25rem;
            border-radius: 1.98rem;
            bottom: 1rem;
            left: 0;
            right: 0;
        }
        .zlzm{
          background:#fff;
        }
        .zlzm .zlzm_title{
          padding:1.3rem;
        }
        .zlzm ul li{
          width:50%;
          float:left;
	        border-radius: 0.5rem;
          padding:0 1.3rem;
        }
        .zlzm ul li .zlzm_list{
          background-color: #f4f5f6;
	        border-radius: 0.5rem;
          margin-bottom: 1.5rem;
          padding:1.6rem;
        }
        .zlzm ul li .zlzm_list img{
          width:4.5rem;
          margin:3rem auto 0;
        }
        .zlzm ul li .zlzm_list .imgDiv{
          width:100%;
          height:10rem;
          position: relative;
          overflow: hidden;
          /*height:*/
        }
        .zlzm ul li .zlzm_list img.cardImg1{
          width:100%;
          height:100%;
          margin:0 auto;
        }
        .cardText{
          font-size: 1.3rem;
          line-height: 1;
        	letter-spacing: 0rem;
        	color: #999999;
          text-align: center;
          margin-top:1.4rem;
        }
        .submit{
          padding:1.3rem;
        }
        .submit span{
          display: block;
          height: 4.4rem;
          line-height: 4.4rem;
          text-align: center;
          color:#fff;
          font-size: 1.5rem;
	        letter-spacing: 0.03rem;
          width:100%;
        	background-image: linear-gradient(-90deg,
        		#f50900 0%,
        		#fa380a 48%,
        		#ff6613 100%),
        	linear-gradient(
        		#09bc63,
        		#09bc63);
        	background-blend-mode: normal,
        		normal;
        	border-radius: 2.2rem;
        }

        .tariff{
          padding:0 1.3rem;
          margin:0 0 2rem;
          text-align: right;
          font-size: 1.3rem;
        	line-height: 1.6rem;
        	color: #f93208;
        }
    </style>
</head>

<body style="background:#fff;">
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../image/back.png">
            </a>
            <div class="aui-title">供应商入驻</div>
            <a class="aui-pull-right aui-btn">
                <img src="../../image/cart_off.png">
                <span>5</span>
            </a>
        </header>
        <div class="content">
            <div class="content_list one">
                <div class="content_li">
                    企业名称:
                    <input type="text" placeholder="请输入企业名称" v-model="store_name">
                </div>
            </div>

            <div class="content_list one">
                <div class="content_li address" id="addressView" @click="test()">
                    企业地址:          {{province}}{{city}}{{district}}
                     <!-- <span v-for="(item,key) in datalist">{{item.name}} </span> -->
                    <!-- 所在地区： -->
                    <img src="../../image/capital/icon4.png" alt="">
                </div>
            </div>

            <div class="content_list two">
                <div class="content_li" style="border-bottom:none;">
                    联系方式:
                    <input type="text" placeholder="请输入联系方式" v-model="telephone">
                </div>
            </div>
            <div class="zlzm">
              <div class="zlzm_title">资历证明上传</div>
              <ul class="clearfix">
                <li class="cardContent aui-list-item" @click="tast(1)">
                    <div class="zlzm_list">
                        <div class="imgDiv" v-if="business_license == '' || business_license == null || business_license == undefined">
                            <img src="../../image/zlrz1.png" class="cardImg" />
                        </div>
                        <div class="imgDiv" v-else>
                            <img :src="business_license" class="cardImg1" width="100%" />
                        </div>
                        <div class="cardText">上传营业执照</div>
                    </div>
                </li>
                <li class="cardContent aui-list-item" @click="tast(2)">
                    <div class="zlzm_list">
                        <div class="imgDiv" v-if="organization_code == '' || organization_code == null || organization_code == undefined">
                            <img src="../../image/zlrz1.png" class="cardImg" />
                        </div>
                        <div class="imgDiv" v-else>
                            <img :src="organization_code" class="cardImg1" width="100%" />
                        </div>
                        <div class="cardText">上传组织机构代码证</div>
                    </div>
                </li>
                <li class="cardContent aui-list-item" @click="tast(3)">
                    <div class="zlzm_list">
                        <div class="imgDiv" v-if="hygienic_license == '' || hygienic_license == null || hygienic_license == undefined">
                            <img src="../../image/zlrz1.png" class="cardImg" />
                        </div>
                        <div class="imgDiv" v-else>
                            <img :src="hygienic_license" class="cardImg1" width="100%" />
                        </div>
                        <div class="cardText">上传卫生许可证</div>
                    </div>
                </li>
                <li class="cardContent aui-list-item"  @click="tast(4)">
                    <div class="zlzm_list">
                        <div class="imgDiv" v-if="other_pic == '' || other_pic == null || other_pic == undefined">
                            <img src="../../image/zlrz1.png" class="cardImg" />
                        </div>
                        <div class="imgDiv" v-else>
                            <img :src="other_pic" class="cardImg1" width="100%" />
                        </div>
                        <div class="cardText">上传其他证件</div>
                    </div>
                </li>
              </ul>
            </div>
            <div class="submit">
              <span @click="storeApply()">提交</span>
            </div>
            <div class="tariff" @click="goTariff()">资费问题</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript">
    apiready = function() {
        new Vue({
            el: "#app",
            data: {
                province: '',
                city: '',
                district: '',
                datalist: [],
                store_name: '',
                telephone: '',
                business_license: '',
                organization_code: '',
                hygienic_license: '',
                other_pic: '',
                statu:''
                // address: '',
            },
            methods: {
                test: function() {
                    var that = this
                    var addressView = api.require('addressView');
                    addressView.open({
                        file_addr: 'widget://res/district.txt', //数据源地址
                        selected_color: '#ff0000', //颜色
                        pro_id: 410000, //省id
                        city_id: 410100, //市id
                        dir_id: 410104 //区id
                    });

                    addressView.show({}, function(ret, err) {
                        if (ret.status) {
                            console.log(JSON.stringify(ret)); //返回值
                            // that.datalist=ret.data
                            that.province=ret.data[0].name
                            that.city=ret.data[1].name
                            that.district=ret.data[2].name
                        }
                    });
                },
                //上传身份证照片
                tast:function(type) {
                    var _this = this;
                    api.actionSheet({
                        title: '上传身份证照片',
                        cancelTitle: '取消',
                        buttons: ['图片', '拍照']
                    }, function(ret, err) {

                        if (ret.buttonIndex == 2) {
                            _this.personImg('camera', type)
                        } else if (ret.buttonIndex == 1) {
                            _this.personImg('library', type)
                        }

                    });
                },
                personImg:function(type, index) {
                    var _this = this;
                    api.getPicture({
                        sourceType: type,
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        allowEdit: true,
                        quality: 100,
                        saveToPhotoAlbum: false
                    }, function(ret, err) {
                        if (ret) {
                          // console.log(JSON.stringify(ret))
                          if (ret.data != '' && index == 1) {
                            _this.business_license = ret.data;
                          }else if(ret.data != '' && index == 2){
                            _this.organization_code = ret.data;
                          }else if(ret.data != '' && index == 3){
                            _this.hygienic_license = ret.data;
                          }else if(ret.data != '' && index == 4){
                            _this.other_pic = ret.data;
                          }
                        }
                    });

                },
                storeApply:function(){
                  var $_this=this;
                  const data = {
                     token:$api.getStorage('token'),
                     province:$_this.province,
                     city:$_this.province,
                     district:$_this.district,
                     store_name:$_this.store_name,
                     telephone:$_this.telephone,
                     business_license:$_this.business_license,
                     organization_code:$_this.organization_code,
                     hygienic_license:$_this.hygienic_license,
                     other_pic:$_this.other_pic
                  }
                  Axios.post(window.Url.addshoper,data).then(function(res){

                    if(res.status == 1){
                       api.openWin({
                           name: 'auditing',
                           url: './auditing.html',
                           pageParam: {
                               type: $_this.statu
                           }
                       });
                    }else{
                      api.toast({
                          msg:res.info,
                          duration: 2000,
                          location: 'bottom'
                      });
                    }
                  }).catch((err) => {
                    api.alert({ msg: JSON.stringify(err) });
                  })
                },
                goTariff:function(){
                  api.openWin({
                      name: 'tariff',
                      url: './tariff.html',
                      pageParam: {
                          name: 'test'
                      }
                  });

                },
                isOk:function(){
                  var $_this=this;
                  const data = {
                    token:$api.getStorage('token'),
                    type:1
                  }
                  Axios.post(window.Url.checkaddshop,data).then(function(res){
                    console.log(JSON.stringify(res))
                    $_this.statu=res.status
                  }).catch((err) => {
                    api.alert({ msg: JSON.stringify(err) });
                  })
                }
            },
            mounted: function() {
                // console.log(api.pageParam.name)
                var token = $api.getStorage('token');
                console.log(token)
            }
        })
    };

    function goBack() {
        api.closeWin({

        });
    };
</script>

</html>
